<template>
	<view class="content">
		<view class="logo">订单</view>
		<h2 class="logo-text">订单管理平台</h2>
		<view class="flex inner-content">
			<!-- 左侧图片 -->
			<view class="inner-content-left login-bg">
				<!-- <image src="@/static/images/img_01@2x.png" mode="aspectFit"></image> -->
			</view>
			<!-- 右侧登录框 -->
			<view class="inner-content-right flex-1">
				<h1 class="text_1">用户登录</h1>
				<u-form ref="uForm" :rules="rules" :model="queryParams">
					<u-form-item
						prop="phone"
						ref="item1"
					>
						<u-input
							v-model="queryParams.phone"
							placeholder="请输入手机号"
							type="text"
							@confirm="login"
							prefixIcon="phone"
							prefixIconStyle="font-size: 22px;color: #909399"
							class="input-phone"
						></u-input>
					</u-form-item>
					
					<u-form-item
						prop="password"
						ref="item2"
					>
						<u-input
							v-model="queryParams.password"
							placeholder="请输入密码"
							type="password"
							prefixIcon="lock-open"
							@confirm="login"
							prefixIconStyle="font-size: 22px;color: #909399"
							class="input-pwd"
						></u-input>
					</u-form-item>
				</u-form>
				<!-- 登录按钮 -->
				<u-button 
					@click="login" 
					class="text_3" 
					type="primary" 
					:loading="loginLoading" 
					loadingText="登录"
				>登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import constant from '@/constant/constant.js'
	export default {
		data() {
			return {
				loginLoading: false,
				// 登录用户名 密码
				queryParams:{
					phone:'',
					password:''
				},
				rules: {
					phone: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					password: [
						{
							type: 'string',
							required: true,
							message: '请输入密码',
							trigger: ['blur']
						}
					]
				},
			}
		},
		onLoad() {

		},
		methods: {		
			login(){	
				this.$refs.uForm.validate().then(res => {
					// 登录接口
					this.api.login(this.queryParams).then((res)=>{
						this.loginLoading = true
						if(res.data.code == 200 && res.data.success == true){
							// 保存token
							uni.setStorageSync(constant.StorageName.APP_LOGIN_TOKEN, res.data.data) 
							// 获取用户数据
							this.api.getUserInfo({}).then((res)=>{
								// 保存用户数据
								uni.setStorageSync('userData', res.data.data)
							}).then(()=>{
								// 跳转首页
								uni.redirectTo({
									url:'/pages/first/first'
								})
							})
							
							this.loginLoading = false
						}else{
							uni.$u.toast('登录失败，请重试')
							this.loginLoading = false
						}
						
					})
					
				}).catch(errors => {
					uni.$u.toast('请正确填写手机号和密码')
				})
				
			}
		}
	}
</script>

<style>
	.content {
		width: 1920rpx;
		min-height: 100vh;
		background-color: #fff;
		background-attachment: fixed;
		background-image: url('@/static/images/img_bg01@2x.png');
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.logo{
		width: 86rpx;
		height: 86rpx;
		background: rgb(255, 255, 255);
		border-radius: 50%;
		opacity: 1;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 48rpx;
		color: #155CB8;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.logo-text{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 50rpx;
		color: #FFFFFF;
		opacity: 1;
		margin-bottom: 50rpx;
	}
	.inner-content{
		width: 62.5%;
		height: 612rpx;
		background: rgb(255, 255, 255);
		box-shadow: 0rpx 6rpx 52rpx rgba(0, 0, 0, 0.36);
		opacity: 1;
		border-radius: 6rpx;
	}
	.login-bg{
		width: 626rpx;
		position: relative;
		padding: 124rpx 40rpx 103rpx 50rpx;
		box-sizing: border-box;
		background:#fff url('@/static/images/img_01@2x.png') no-repeat;
		background-size:90% auto;
		background-position: center center; 
	}
	.login-bg>image{
		width: 100%;
		height: 100%;
	}
	.inner-content-right{
		box-sizing: border-box;
		padding:105rpx 52rpx;
	}
	.text_1{
		text-align: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 37rpx;
		color: #333333;
	}
	.text_3{
		width: 100%;
		height: 70rpx;
		background: rgb(48, 110, 236);
		border-radius: 6rpx;
		color:#fff;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei; 
		font-weight: 400;
		line-height: 31rpx;
		cursor: pointer;
		margin-top: 70rpx;
	}
	.input-phone{
		margin-top: 42rpx;
		height:45rpx;
	}
	.input-pwd{
		height:45rpx;
	}
</style>
